Application development environments (ADEs) are software tools that allow a developer (e.g., a web developer, application developer, and the like) to create web pages, websites, interactive applications, and the like for use by end users (e.g., visitors to websites, application uses, and the like). Various ADEs exist in the current marketplace, such as DREAMWEAVER®, GOLIVE®, FLEX™, and FLEX BUILDER™ each available from Adobe Systems Incorporated of San Jose, Calif. DREAMWEAVER® and GOLIVE® are ADEs that allow web developers to design Hypertext Markup Language (HTML) web pages in both a code editor and a graphical-based design time environment. DREAMWEAVER® also allows the developer to design in other languages, such as, for example, ASP, CFML™, and the like. FLEX™ is a presentation layer technology that has an ADE, FLEX BUILDER™, associated with it for creating Rich Internet Applications (RIAs), which are interactive, multimedia, applications, that may run on client-side players or within client-side process containers, for example, Adobe System Incorporated's FLASH® player. FLEX™ and FLEX BUILDER™ utilize Adobe Systems Incorporated's MXML™, an Extensible Markup Language (XML)-based language, to describe RIAs. Much of a developer's job, whether creating a simple web page, a complex web application, or a RIA, is to create user interfaces (UIs) for the applications that are easy to use and enhance a user's experience.
The interface screens defined with HTML, MXML™, and the like often include container objects or constructs, which are structural elements that hold additional visual objects that are rendered in the resulting interface screens. In other words, a container may be considered a visual organizational unit for automatically laying out the visual elements of a UI. Thus, while an end user usually will not see the actual container objects or constructs in the application, the containers are present, organizing and laying out the visual elements. In an MXML™-enabled ADE, example container constructs include an HBox, VBox, form, form item, panel, tile, grid, grid row or item, title window, control bar, HDividedBox, VDividedBox, application, and the like. In HTML, containers take the form of tables, divisions (DIVs), and the like. Each of these constructs define containers which, for example, position content horizontally (e.g., an HBox) and/or vertically (e.g., a VBox), or simply hold visual objects at some position within the visual page (e.g., table, DIV).
The complex designs of modern web pages and graphics-driven applications often use various nested containers and stacked containers within the UI, in order to create the desired visual experience. However, nesting multiple containers in a UI may cause problems for developers during creation or modification of the UI. For example, a UI under development may have a horizontal box to lay objects out horizontally and one or more vertical boxes, nested within the horizontal box to lay objects out vertically. The problem arises when the various nested containers share edges with each other. For example, the left edge of a VBox that is inside an HBox could be the same as the left edge of the HBox containing that VBox. If the developer desires to insert another VBox between the current left-most VBox and the containing HBox, the shared edge will make it extremely difficult, if not impossible, to access to the virtual space between the existing boxes. To the developer, there would not appear to be any space into which he or she may drag and drop another desired object. Therefore, in order for the developer to place or move an object, he or she would typically move one of the overlapped boxes to physically create a space into which the other object may be placed. This extra step is seriously inconvenient to a developer.